<template>
  <div class="social-login-container">
    <div class="login-btn" @click="handleLogin('WeChat')">
      <span class="wechat-login">
         <el-icon :size="30" class="iconfont icon-fenxiang"></el-icon>
      </span>
    </div>
    <div class="login-btn" @click="handleLogin('QQ')">
      <span class="qq-login">
         <el-icon :size="30" class="iconfont icon-fenxiang"></el-icon>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>

const handleLogin = (type: string) => {
  if (type == "WeChat") {

  } else if (type == "QQ") {

  }
}
</script>

<style lang="less" scoped>
.social-login-container {
  margin: 20px 0;

  .login-btn {
    display: inline-block;
    cursor: pointer;
  }

  .wechat-login,
  .qq-login {
    display: inline-block;
    text-align: center;
    border-radius: 4px;
  }

  .wx-svg-container {
    background-color: #24da70;
  }

  .qq-svg-container {
    background-color: #6BA2D6;
    margin-left: 50px;
  }
}
</style>